<template>
	<view>
		<!-- scroll-with-animation -->
		<scroll-view class="scroll-view-content" scroll-y :scroll-into-view="toView" @scrolltoupper="scrolltoupper" :upper-threshold="0">
			<!-- <view class='scrollMsg'> -->
			<block v-for="(item,index) in list" :key="item.id">
				<!-- 单个消息1发出（右）自己 -->
				<view class="chat-msg chat-msg-right u-flex" v-if="item.is_self === true"  :id="'msg-' + item.id">
					<view class='msg'>{{item.content}}</view>
					<view class="avatar">
						<image :src="imgUrl(vuex_user.avatar)"></image>
					</view>
				</view>
				<!-- 单个消息1发出（左） -->
				<view class="chat-msg chat-msg-left u-flex" v-else :id="'msg-' + item.id">
					<view class="avatar">
						<image :src="imgUrl(avatar)"></image>
					</view>
					<view class='msg'>{{item.content}}</view>
				</view>
			</block>

			<!--占位 键盘弹起时 20rpx 收起时121-->
			<view class="bottom-box" :style="{height:inputBottom ? inputBottom + 'px' : '0'}"></view>
		</scroll-view>

		<view class='inputRoom' :style="{bottom:inputBottom + 'px'}">
			<input @confirm='sendClick' :adjust-position="false" v-model="inputVal" confirm-type='send' @focus='focus'
				confirm-hold
				@blur='blur'></input>
			<button @click="sendClick">发送</button>
		</view>
	</view>
</template>

<script>
	import socket from '@/common/socket'
	const windowWidth = wx.getSystemInfoSync().windowWidth;
	const windowHeight = wx.getSystemInfoSync().windowHeight;
	export default {
		data() {
			return {
				scrollHeight: windowHeight,
				inputBottom: 0,
				inputVal: '',
				toView: '',
				
				list: [],
				status:'loading',
				page:1,
				id:'',
				name:'',
				avatar:''
			}
		},
		methods: {
			focus(e) {
				let keyHeight = Number(e.detail.height)
				this.scrollHeight = (windowHeight - keyHeight) + 'px',
				this.inputBottom = keyHeight
				this.toView = ''
				this.$nextTick(() => {
					this.toView = 'msg-' + (this.list[this.list.length - 1].id)
				})
			},
			//失去聚焦(软键盘消失)
			blur(e) {
				this.scrollHeight = windowHeight,
				this.inputBottom = 0
			},
			/**
			 * 发送点击监听
			 */
			sendClick(e) {
				if(!this.inputVal){this.$u.toast('消息不能为空');return;}
				this.$u.post('/api/chat/send',{
					receive_id:this.id,//接收人id
					type:1,//消息类型：1文本，2图片，3视频，4语音，5文件，6其他
					content:this.inputVal,//	消息内容
					accessory:''//	附加内容
				}).then(res=>{
					this.list.push({
						is_self:true,
						content: this.inputVal,
						id:this.$u.guid()
					})
					this.$nextTick(() => {
						this.inputVal = ''
						this.toView = 'msg-' + (this.list[this.list.length - 1].id)
					})
				})
			},
			scrolltoupper(e){
				if(this.status === 'loadmore'){
					this.page ++
					this.getList()
				}
				// 滚动到顶部/左边，会触发 scrolltoupper 事件
			},
			getList(){
				this.status = 'loading'
				this.$u.post('/api/chat/log',{
					friend_id:this.id,
					page:this.page,
					limit:30//默认30条
				}).then(res=>{
					
					this.list = this.page === 1 ? res : [...res,...this.list]
					this.status = res.length  === 30 ? 'loadmore' : 'nomore'
					if(this.page === 1){
						this.list.length && this.$nextTick(() => {
							this.toView = 'msg-' + (this.list[this.list.length - 1].id)
						})
					}else{
						this.list.length && this.$nextTick(() => {
							this.toView = 'msg-' + (this.list[res.length].id)
						})
					}
				},err=>{
					this.status = 'nomore'
				})
			}
		},
		onLoad({id,name,obj,avatar}) {
			this.id = id
			this.name = name
			this.avatar = avatar

			this.getList()
			
			socket.acceptMessage = res=>{
				console.log("页面收到的消息", res)
				if(res.type == "message"){
					// 发送者id
					let id = res.data.send_id.split('_')[1]
					// 处理页面
					if(id == this.id){
						this.list.push({
							type:res.data.type,
							content:res.data.content,
							accessory:res.data.accessory,
							id:res.data.id
						})
						this.list.length && this.$nextTick(() => {
							this.toView = 'msg-' + (this.list[this.list.length - 1].id)
						})
					}
					// 清除小红点 添加一个hide
					// this.$store.commit('add_message_list',{
					// 	id:id,
					// 	hide:!0//隐藏此对话
					// })
				}
			}
		},
		onReady() {
			uni.setNavigationBarTitle({
				title:this.name || '聊天'
			})
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #fff;
	}
	.scroll-view-content{position: fixed;left: 0;top: 0;width: 100%;height: 100%;}
	.inputRoom {
		width: 100%;
		height: 120rpx;
		border-top: 1rpx solid #ddd;
		background-color: #f5f5f5;
		position: fixed;
		bottom: 0;
		display: flex;
		align-items: center;
		z-index: 20;
		transition: all .1s;
	}

	.inputRoom input {
		height: 72rpx;
		background-color: #fff;
		border-radius: 15rpx;
		margin-left: 30rpx;
		padding: 0 25rpx;
		font-size: 28rpx;
		color: #444;
		flex: 1;
	}

	.inputRoom button {
		height: 70rpx;
		width: 120rpx;
		background-color: $tc;
		color: #fff;
		font-size: 28rpx;
		margin: 0 30rpx 0 15rpx;
		border: 0;
		border-radius: 15rpx;
	}

	.inputRoom button::after {
		border: 0;
	}

	.chat-msg {
		.msg{
			font-size: 30rpx;
			color: #444;
			line-height: 48rpx;
			padding: 16rpx 20rpx;
			border-radius: 10rpx;
			z-index: 10;
			word-break: break-all;
			text-align: justify;
		}
		&.chat-msg-left{padding: 20rpx 74rpx 20rpx 20rpx;
			.msg{background-color: #f1f1f1;margin-left: 20rpx;}
		}
		&.chat-msg-right{justify-content: flex-end; padding: 20rpx 20rpx 20rpx 74rpx;
			.msg{background-color: #f1f1f1;margin-right: 20rpx;}
		}
		.avatar,.avatar image{width: 90rpx; height: 90rpx;border-radius: 50%;}
	}
	.bottom-box{
		width: 100%;
		padding-bottom: 120rpx;
		box-sizing: content-box;
	}
</style>
